<template>
    <div>
        <div class="square">
            <div class="title">选择活动</div>
            <div class="tips">支持添加未开始和进行中的秒杀活动，可拖动调整商品展示顺序</div>
            <div class="content">
                <draggable :list="form.data.imgList" draggable=".item">
                    <template #item="{ index }">
                        <div class="item" @click="deleteImg(index)">
                            <img
                                :src="form.data.imgList[index].coverImg"
                                style="width: 100%; height: 100%; border-radius: 4px" />
                            <div class="bg-tips" v-if="form.data.imgList[index]?.activityGoods[0].onSale != 1">
                                {{ form.data.imgList[index]?.activityGoods[0].onSale == 2 ? '已下架' : '已售罄' }}
                            </div>
                            <div class="del">
                                <el-icon class="icon-del"><Delete /></el-icon>
                            </div>
                        </div>
                    </template>
                </draggable>
                <div class="item add" @click="add">
                    <img src="@/assets/imgs/mall/decorate/add.png" class="addimg" />
                </div>
            </div>
        </div>
        <div class="square">
            <div class="title">排列方式</div>
            <div class="content">
                <el-radio-group v-model="form.data.tabs">
                    <el-radio-button label="1">一行一个</el-radio-button>
                    <el-radio-button label="2">一行两个</el-radio-button>
                    <el-radio-button label="3">一行三个</el-radio-button>
                    <el-radio-button label="4">单行滑动</el-radio-button>
                </el-radio-group>
            </div>
        </div>
        <div class="square">
            <div class="title">模块间隙</div>
            <div class="content">
                <el-slider v-model="form.data.space" :step="1" :max="20"> </el-slider
                ><el-input
                    style="width: 58px; margin-left: 8px"
                    v-model="form.data.space"
                    @change="changeSpace"
                    type="number"
                    onkeyup="value=value.replace(/[^\d]/g,'')"></el-input
                ><span style="margin-left: 8px">像素</span>
            </div>
        </div>
        <div class="square">
            <div class="title">展示内容</div>
            <div class="content">
                <el-checkbox-group v-model="form.data.contentList">
                    <el-checkbox :label="1">商品名称</el-checkbox>
                    <el-checkbox :label="2">抢购倒计时</el-checkbox>
                    <el-checkbox :label="3">剩余库存</el-checkbox>
                    <el-checkbox :label="4">商品原价</el-checkbox>
                    <el-checkbox :label="5">购买按钮</el-checkbox>
                </el-checkbox-group>
            </div>
        </div>
        <ZwSeckillActivity ref="ZwSeckillActivityRef" @submit="submit" :multiple="true" />
    </div>
</template>
<script setup>
import { ref, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus';
import draggable from 'vuedraggable';
import request from '@/request';

const emit = defineEmits(['changeSetting']);
const props = defineProps(['tabparam', 'comIndex', 'components']);
const ZwSeckillActivityRef = ref();
let form = reactive({ data: { space: 0, imgList: [], tabs: props.tabparam, contentList: [1, 2, 3, 4, 5] } });
let allitem = ref([]);
const deleteImg = index => {
    form.data.imgList.splice(index, 1);
};
const add = () => {
    ZwSeckillActivityRef.value.onOpen(form.data.imgList);
};
const changeSpace = () => {
    form.data.space = Number(form.data.space);
};
/**添加商品 */
const submit = async param => {
    if (!param.length) {
        ElMessage.warning('请选择商品');
        return;
    }
    //原数据
    let originIds = form.data.imgList.map(item => item.id);
    //新数据
    let ids = param.map(item => item.id);
    // 过滤掉新数据不存在的数据
    let data = originIds.filter(item => ids.includes(item));
    ids.forEach(item => {
        if (!data.includes(item)) {
            data.push(item);
        }
    });
    const res = await request('seckillList', { activityId: data });
    form.data.imgList = res.data;
};
watch(
    () => form.data,
    val => {
        emit('changeSetting', {
            ...form.data,
            name: 'seckill',
            index: props.comIndex ? props.comIndex : 0
        });
    },
    {
        deep: true
    }
);
watch(
    () => props.tabparam,
    val => {
        emit('changeSetting', {
            ...form.data,
            name: 'seckill',
            index: props.comIndex ? props.comIndex : 0
        });
    },
    {
        deep: true,
        immediate: true
    }
);
watch(
    () => props.comIndex,
    val => {
        allitem.value = JSON.parse(JSON.stringify(props.components));
        if (allitem.value.length) {
            form.data = Object.keys(allitem.value[val].options).length
                ? allitem.value[val].options
                : { space: 0, imgList: [], tabs: props.tabparam, contentList: [1, 2, 3, 4, 5] };
        } else {
            form.data = { space: 0, imgList: [], tabs: props.tabparam, contentList: [1, 2, 3, 4, 5] };
        }
    },
    { immediate: true }
);
watch(
    () => props.components,
    val => {
        if (val.length && Object.keys(val[props.comIndex].options).length) {
            form.data = val[props.comIndex].options;
        } else {
            form.data = { space: 0, imgList: [], tabs: props.tabparam, contentList: [1, 2, 3, 4, 5] };
        }
    },
    { immediate: true, deep: true }
);
</script>
<style lang="scss" scoped>
:deep(.el-slider) {
    width: 200px;
}
.square {
    border-bottom: 1px solid rgba(234, 234, 234, 1);
    .title {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #33302d;
        line-height: 14px;
        margin-bottom: 8px;
        margin-top: 24px;
    }
    .title::before {
        content: '*';
        color: #f56c6c;
        margin-right: 4px;
    }
    .tips {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #969696;
        line-height: 14px;
        margin-bottom: 16px;
    }
}
.content {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 24px;

    .item {
        position: relative;
        left: 0;
        top: 0;
        display: inline-block;
        width: 60px;
        height: 60px;
        border-radius: 4px;
        margin-right: 6px;
        margin-bottom: 6px;
        border: 1px solid #eaeaea;
        flex-shrink: 0;
        .bg-tips {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 60px;
            height: 20px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            text-align: center;
            line-height: 20px;
            background: rgba(51, 48, 45, 0.6);
            text-align: center;
            border-radius: 0px 0px 4px 4px;
        }
    }
    .add {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ffffff;
        border-radius: 4px;
        border: 1px solid #eaeaea;
    }
    .addimg {
        width: 18px;
    }
    .del {
        position: absolute;
        left: 0;
        top: 0;
        width: 60px;
        height: 60px;
        color: #ffffff;
        opacity: 0;
        text-align: center;
        font-size: 20px;
        line-height: 60px;
        cursor: pointer;
    }
    .del:hover {
        // border-radius: 4px;
        background-color: var(--el-overlay-color-lighter);
        transition: var(--el-transition-duration);
        opacity: 1;
    }
}
</style>
